<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">每日营养 /</div>
            <div class="am-g am-g-collapse date-range">
                <div class="am-u-sm-3">
                    <input type="text" class="layui-input" id="dateRange">
                </div>
                <div class="am-u-sm-3 am-u-end">
                    <button type="button" class="am-btn am-btn-default" @click="search">按日期查询</button>
                </div>
            </div>
            <div class="am-btn-group am-btn-group-sm btn-group">
                <button type="button" class="am-btn am-btn-default" @click="addMenu">生成餐单</button>
            </div>
            <table class="am-table table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>餐类</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td class="am-text-middle"><a href="javascript:" @click="info(item.attrs.id)">{{ item.attrs.date }}</a></td>
                        <td class="am-text-middle">
                            <a href="javascript:" @click="info(item.attrs.id)">
                                <span v-if="item.attrs.type == 1">早餐</span>
                                <span v-if="item.attrs.type == 2">午餐</span>
                                <span v-if="item.attrs.type == 3">晚餐</span>
                            </a>
                        </td>
                        <td class="am-text-middle">
                            <button class="am-btn am-btn-default am-btn-xs" @click="info(item.attrs.id)"><i class="am-icon-trash"></i>&nbsp;详情</button>
                            <button class="am-btn am-btn-danger am-btn-xs" @click="del(item.attrs.id)"><i class="am-icon-trash"></i>&nbsp;删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                startDate: '',
                endDate: ''
            }
        },
        mounted: function() {
            var self = this;
            var jsonStr = '${list!}';
            if (jsonStr != '') {
                self.list = JSON.parse(jsonStr);
            }
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#dateRange',
                    range: '~',
                    format: 'yyyy-MM-dd',
                    change: function(value, date) {
                        self.startDate = value.split(" ~ ")[0];
                        self.endDate = value.split(" ~ ")[1];
                    }
                });
            });
        },
        methods: {
            addMenu() {
                window.location.href = "/boya/genMenu";
            },
            info(id) {
                window.location.href = "/boya/mealInfo?id=" + id;
            },
            del(id) {
                confirm("确认删除？", function() {
                    var param = Qs.stringify({
                        id: id
                    });
                    axios({
                            url: '/boya/delMeal',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            if (response.data.status == 200) {
                                // msg("删除成功");
                                window.location.reload();
                            } else {
                                msg("删除失败");
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            msg("删除失败");
                            console.log(error);
                        });
                })
            },
            search() {
                var self = this;
                window.location.href = "/boya/nutritionWithDate?startDate=" + self.startDate + "&endDate=" + self.endDate;
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .date-range {
        margin-bottom: 10px;
    }

    .btn-group {
        margin-bottom: 10px;
    }

    .table {
        /*width: auto;*/
    }

    .no-border {
        border: none;
    }
    </style>
</body>

</html>